<!DOCTYPE html>
<html lang="en">

<%@ page contentType="text/html; charset=utf-8"%>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin index Examples</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <script src="/assets/js/echarts.min.js"></script>
    <link rel="stylesheet" href="/assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="/assets/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="/assets/css/app.css">
    <script src="/assets/js/jquery.min.js"></script>

</head>

<body data-type="index">
<div class="am-g tpl-g">

    <!-- 头部 -->
    <jsp:include page="common/atmHead.jsp"></jsp:include>
    <!-- 风格切换 -->

    <!-- 侧边导航栏 -->
    <jsp:include page="common/atmLeft.jsp"></jsp:include>


    <!-- 内容区域 -->
    <div class="tpl-content-wrapper" id="app">

        <div class="row-content am-cf">
            <div class="row  am-cf">

                <div class="row">

                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">消息列表2</div>
                                <div class="widget-function am-fr">
                                    <a href="javascript:;" class="am-icon-cog"></a>
                                </div>
                            </div>
                            <div class="widget-body am-fr">

                                <form id="flowForm" action="/flow/downLoadFlow.do" method="post" class="am-form tpl-form-line-form">


                                    请输入用户名：<input type="text" v-model="username" class="tpl-form-input"><br>
                                    用户名：<span>{{username}}</span>

                                </form>



                                <div class="widget am-cf">
                                    <div class="widget-head am-cf">
                                        <div class="widget-title am-fl"></div>
                                        <div class="widget-function am-fr">

                                        </div>
                                    </div>
                                    <div class="widget-body  widget-body-lg am-fr">

                                        <el-table
                                                :data="messageArray"
                                                stripe
                                                style="width: 100%">
                                            <el-table-column
                                                    prop="msgId"
                                                    label="ID"
                                                    width="180">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="context"
                                                    label="内容"
                                                    width="180">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="msgType"
                                                    label="类型">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="status"
                                                    label="状态">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="createTime"
                                                    label="时间">
                                            </el-table-column>

                                        </el-table>

                                        <div class="block">
                                            <span class="demonstration">显示总数</span>
                                            <el-pagination
                                                    @current-change="handleCurrentChange"
                                                    :current-page.sync="currnetPage"
                                                    :page-size="3"
                                                    layout="total, prev, pager, next"
                                                    :total="totalData">
                                            </el-pagination>
                                        </div>



                                    </div>
                                </div>



                            </div>

                        </div>
                    </div>
                </div>





            </div>




        </div>



    </div>

</div>
</div>


</div>





<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>

    $('#myMessage').addClass('active');

    var atmVue = new Vue({
        el : '#app',
        data : {
            username : 'tom',
            messageArray : [],
            currnetPage : 1,
            totalData : 1
        },
        created : function() {
            this.loadMessages();
        },
        methods : {
            loadMessages : function () {
                queryMessage();
            },
            handleCurrentChange : function (pageNum) {
                queryMessage(pageNum)
            }
        }
    });

    var currnetPage = 1;
    var totalPage = 1;

    function queryMessage(currnetPage) {
        dayuanit.ajax('/message/queryMessage.do', {
            currentPage : currnetPage
        }, function (result) {
            var messages = result.data.data;
            atmVue.messageArray = messages;
            atmVue.totalData = result.data.totalData
        })
    }

    function downLoadFlow() {
        $('#flowForm').submit();
    }

    queryMessage(1);
</script>

</body>

</html>